{% extends 'social_base.html' %}
{% load static %}
{% block title %}
我的好友管理
{% endblock %}
{% block head %}
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
        background-image: url("{{ MEDIA_URL }}{{ user_profile.background_image }}");
        background-size: cover;
    }
</style>
{% endblock %}
{% block body %}

<div class="profile-container">
    <h2>{{username}}的好友</h2>
    <a href="{% url 'add_profile' username %}" class="btn btn-light"
        style="font-size: 20px;background-color: #9eeaf9">添加好友</a>
    <ul>
        {% for friend in user_friends %}

        <li class="left-right-container">
            <div class="left-div">
                {% if friend.friend.avatar %}
                <img src="{{ friend.friend.avatar.url }}" alt="Avatar" width="50" height="50">
                {% endif %}
                <strong>{{ friend.friend.nickname }}</strong>
                <br>
                {{ friend.friend.bio }}<br>
                点赞数: {{ friend.friend.total_likes }}<br>

            </div>
            <div class="container right-div">
                <a href="{% url 'like_user' user_name=username friend_name=friend.friend.user.username %}"
                    class="btn btn-sm" style="font-size: 20px;background-color: #9eeaf9;margin-left: 20px">点赞 </a>
                <a href="{% url 'leave_message' sender_username=username receiver_username=friend.friend.user.username %}"
                    class="btn btn-sm" style="font-size: 20px;background-color: #9eeaf9;margin-left: 20px">留言</a>
                <a href="{% url 'delete_friend' friend.friend.user.username username %}" class="btn btn-sm"
                    style="font-size: 20px;background-color: #bb2d3b;margin-left: 20px">删除好友 </a>
            </div>
        </li>
        {% endfor %}
    </ul>
</div>
{% endblock %}